<template>
  <div>
    <div class="header">
      <el-breadcrumb separator="/" style=" margin: 0 auto; font-size: 20px;padding-top: 1%;">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">数据查询</a></el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="hello" >
      <div class="one">
        <el-select  v-model="value1" placeholder="请选择实验基地" size="mini"
                   style="width: 70%;margin-left: 7%;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="three">
        <el-select v-model="value" placeholder="选择间隔时间" size="mini"
                   style="width:70%;margin-left: 7%;">
          <el-option
            v-for="item in optiontwo"
            :key="item.value"
            :label="item.label"
            :value="item.label">
          </el-option>
        </el-select>
      </div>
      <div class="two">
        <el-form :model="basicInfo" size="mini">
          <el-row >
            <!--开始时间-->
            <el-col :span="12">
              <el-form-item prop="startDate">
                <el-date-picker v-model="basicInfo.startDate" type="date" :picker-options="pickerOptionsStart"
                                format="yyyy-MM-dd" placeholder="开始时间"
                                style="width: 80%;" value-format="timestamp">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!--结束时间-->
            <el-col :span="12">
              <el-form-item label="至" prop="endDate">
                <el-date-picker v-model="basicInfo.endDate" type="date" :picker-options="pickerOptionsEnd"
                                format="yyyy-MM-dd" placeholder="结束时间"
                                style="width: 80%;" value-format="timestamp">
                </el-date-picker>
              </el-form-item>
            </el-col>
			
          </el-row>
        </el-form>
      </div>
	  <div class="four">
		  <el-col :span="12">
				<el-button size="mini" style="margin-bottom: 1%;" @click="getPageDataList"> 查询</el-button>
			</el-col>
			</div>
       
    </div>


    <div class="foot">
<!--      .slice((currentPage-1)*pageSize, currentPage*pageSize)-->
      <el-table :data="tableData" stripe style="width: 100%;" >
        <el-table-column type="index" label="采集条数" width="80">
          <template slot-scope="scope">
            <span>{{scope.$index+1+pageSize*(currentPage-1)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="gtSoilTemperature" label="土壤温度"></el-table-column>
        <el-table-column prop="gtSoilMoisture" label="土壤湿度"></el-table-column>
        <el-table-column prop="gtConductivity" label="电导率"></el-table-column>
        <el-table-column prop="gtSoilPh" label="土壤PH"></el-table-column>
        <el-table-column prop="gtWindDirection" label="风向"></el-table-column>
        <el-table-column prop="gtWindSpeed" label="风速"></el-table-column>
        <el-table-column prop="gtAtmosphericTemperature" label="大气温度"></el-table-column>
        <el-table-column prop="gtAtmosphericHumidity" label="大气湿度"></el-table-column>
        <el-table-column prop="gtRainfall" label="降雨量"></el-table-column>
        <!-- <el-table-column prop="name9" label="光照"></el-table-column> -->
        <el-table-column prop="gtAtmosphericPressure" label="大气压力"></el-table-column>
        <el-table-column prop="gtPm2" label="PM2.5"></el-table-column>
        <el-table-column prop="gtPm10" label="PM10"></el-table-column>
        <el-table-column prop="gtEvaporationCapacity" label="蒸发量"></el-table-column>
      </el-table>
      <el-pagination 
	  layout="prev, pager, next, jumper, sizes" 
	  background
	  :current-page="currentPage" 
	  :page-sizes="[10,15, 20, 50]"
      :page-size="pageSize" 
	  @size-change="handleSizeChange"
	  @current-change="handleCurrentChange"
      :total="this.totalCount">
	  </el-pagination>
    </div>
    <router-view />
  </div>
</template>

<script>
	import axios from 'axios'
  export default {

    methods: {

      //发送请求
      getPageDataList () {
		  var startDate = this.basicInfo.startDate
		  var endDate = this.basicInfo.endDate
		  var cha = (endDate-startDate)/3600000
		  // console.log(cha)
		  // console.log(this.value)
		  // console.log(this.value[0])
		  cha = cha/this.value[0]
		  var param = {
			  "cha": cha,
			  "pageSize": this.pageSize,
			  "page": this.currentPage,
        "total":this.totalCount
		  }
		  // console.log("type:startDate:"+this.basicInfo.startDate + "..."+typeof(this.basicInfo.startDate))
		  // alert(param)
		  // console.log("type:endDate:"+this.basicInfo.endDate + "..."+typeof(this.basicInfo.endDate))
		  
        axios.get(`/api//RtimeData/show?cha=${param.cha}&pageSize=${param.pageSize}&currentPage=${param.page}`)
          .then(({data}) => {
            console.log("({data})")
            console.log(data)
            this.tableData = data.data.records
            this.totalCount = data.data.total
            /*
			this.tableData = []
            // console.log(data.data)
			// console.log(data.data.length)
			var len = data.data.length
			var temps = null 
			for(var i=0;i<len;i++){
				var temp = data.data[i].records
				for(var j=0;j<temp.length;j++){
					var temp_data = temp[j]
					this.tableData.push(temp_data)
				}
				 
				// this.temps.push(temp)
			}
			this.totalCount = this.tableData.length
			// this.tableData.push(temps)
            console.log("this.tableData")
			console.log(this.tableData)
            // this.tableData = data.data.records
            // this.totalCount = data.data.total
            // this.tableData = data.data
            */
          })
          .catch((e) =>{
            console.log(e)
          })
      },
      tableDataTotal(){
        return this.totalCount
      },
	// 请求刷新表格数据
	refreshPage() {
	  console.log("我刷新啦")
	  // let obj = {
	  //   current: this.currentPage,
	  //   size: this.pageSize
	  // };
	  //这个是请求页面数据的函数，具体使用根据实际项目中来
	  // this.loadTableData(obj);
	  this.getPageDataList();
	},
	
      // 条数改变
      handleSizeChange(val) {
		console.log("当前条数:"+val)
        this.pageSize = val;
        this.refreshPage();
      },
      //页码改变
      handleCurrentChange(val) {
		console.log("当前页码:"+val)  
        this.currentPage = val;
        this.refreshPage();
      },
     
      /*
       * listTotal 当前数据总条数
       * pageSize 当前页面条数
       * currentPage 当前页码
       */
      pageSizeFilter(listTotal, pageSize, currentPage) {
		console.log("pageSizeFilter方法调用啦")
        let totalPage = Math.ceil((listTotal - 1) / pageSize);
        let currentP = currentPage > totalPage ? totalPage : currentPage;
        currentPage = currentP < 1 ? 1 : currentP;
        return currentPage
      },
	  // 开始时间限制
	  pickerOptionsStart: {
	    disabledDate: (time) => {
	      if (this.basicInfo.endDate) {
	        // eslint-disable-next-line max-len
	        return time.getTime() > new Date(this.basicInfo.endDate).getTime() || time.getTime() <= new Date(this
	          .basicInfo.createDate).getTime() - 86400000;
	      }
	      return time.getTime() <= new Date(this.basicInfo.createDate).getTime() - 86400000;
	    },
	  },
	  pickerOptionsEnd: {
	    disabledDate: (time) => {
	      if (this.basicInfo.startDate) {
	        return time.getTime() < new Date(this.basicInfo.startDate).getTime();
	      }
	      return time.getTime() <= new Date(this.basicInfo.createDate).getTime() - 86400000;
	    },

    },
    },// end methods
    mounted() {
		this.pageSizeFilter()
      // 页面加载的时候请求一次数据，
      // this.refreshPage()
    },
    beforeDestroy() {},

    data: function() {
      return {
		totalCount: 0,
        pageSize: 10, // 当前页面的条数
        currentPage: 1, // 当前是第几页
        options: [{
          value: '选项1',
          label: '河南洛阳实验基地'
        }],
        value1: '',
		
        optiontwo: [{
          value: '选项1',
          label: '1小时'
        },{
          value: '选项2',
          label: '2小时'
        }],
        value: '',
        basicInfo: {
          // 创建时间 此时间可以通过后端接口取服务器时间 或者 用 new Date().getTime()
          createDate: new Date().getTime(),
          startDate: '', // 开始时间
          endDate: '', // 结束时间
        },
        
        tableData:[],
      };
    },
  }
</script>

<style scoped>
  .header {
    background-color: #E5E9F2;
    height: 56px;
    width: 100%;
    margin-top: -10px;
    margin-left: -35px;
    padding-right: -100px;
    align-items: center;

  }

  .hello {
    width: 100%;
    height: 50px;
    margin-top: 20px;
    margin-left: -3.5%;
    background-color: #E5E9F2;
    position:relative;
    padding: 1%;
  }

  .one{
    width: 18%;
    float: left;
    margin-left: 15%;


  }

  .two{
    width: 30%;
    float: left;


  }
  .three{
    width: 15%;
    float: left;
  }

.four{
	width:10%;
	float: left;
}

  .el-col{
    width: 50%;

  }

  .foot {
    margin-top: 30px;
  }
</style>
